<!DOCTYPE html>
<html lang="cn">
<head>
	<title>分类页面</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		.redColor {
			color: #C40000 !important;
		}
		
		nav.top {
			background-color: #f2f2f2;
			padding-top: 5px;
			padding-bottom: 5px;
			border-bottom: 1px solid #e7e7e7;
		}
		
		nav.top span, nav.top a {
			color: #999999;
			margin: 0px 10px 0px 10px;
		}
		
		nav.top a:hover {
			color: #C40000;
			text-decoration: none;
		}
		
		.simpleSearchDiv {
			background-color: #C40000;
			margin: 10px 20px 40px 0;
			width: 300px;
			height: 40px;
			display: block;
			padding: 1px;
		}
		
		.simpleSearchDiv input {
			width: 225px;
			height: 34px;
			margin: 2px;
			border: 1px solid transparent;
			outline: none;
			padding-left: 10px;
		}
		
		.simpleSearchDiv button {
			width: 60px;
			background-color: #C40000;
			font-size: 14px;
			color: white;
			border: 1px solid transparent;
			vertical-align: middle;
			outline: none;
		}
		
		img.simpleLogo {
			position: absolute;
			top: 50px;
			left: 10px;
			width: 140px;
		}
		
		.searchBelow {
			margin-top: 3px;
			margin-left: -20px;
		}
		
		.searchBelow span {
			color: #999999;
		}
		
		.searchBelow a {
			padding: 0 20px 0 20px;
			font-size: 14px;
		}
		
		a {
			color: #999999;
		}
		
		a:hover {
			color: #C40000;
			text-decoration: none;
		}
		
		.searchDiv {
			background-color: #C40000;
			width: 400px;
			height: 40px;
			padding: 1px;
			display: block;
			margin: 50px auto;
		}
		
		.searchDiv input {
			width: 275px;
			height: 36px;
			margin: 1px;
			border: 1px solid transparent;
			outline: none;
			padding-left: 10px;
		}
		
		.searchDiv button {
			width: 110px;
			border: 1px solid transparent;
			background-color: #C40000;
			outline: none;
			color: white;
			font-size: 20px;
			font-weight: bold;
			vertical-align: middle;
		}
		
		.searchBelow {
			margin-top: 3px;
			margin-left: -20px;
		}
		
		.searchBelow span {
			color: #999999;
		}
		
		.searchBelow a {
			padding: 0 20px 0 20px;
			font-size: 14px;
		}
		
		img.logo {
			position: absolute;
			left: 0px;
			top: 30px;
			z-index: -1;
		}
		
		div.footer {
			margin: 0px 0px;
			border-top: 1px solid #e7e7e7;
		}
		
		div.footer_ensure {
			margin: 24px 0 24px 0;
			text-align: center;
		}
		
		div.footer_desc {
			border-top: 1px solid #e7e7e7;
			margin: 0px 20px;
			padding-top: 30px;
		}
		
		div.footer_desc div.descColumn {
			width: 20%;
			float: left;
			padding-left: 15px;
		}
		
		div.footer_desc div.descColumn span.descColumnTitle {
			color: #646464;
			font-weight: bold;
			font-size: 16px;
		}
		
		div.footer_desc a {
			display: block;
			padding-top: 3px;
		}
		
		div.copyright {
			background-color: #000000;
			border-top: 2px solid #C40000;
		}
		
		div.copyright span.slash {
			color: #ffffff;
		}
		
		div.footer div.copyright div.white_link a {
			color: #ffffff;
			padding: 0px 5px;
		}
		
		div.footer div.copyright div.white_link {
			padding: 10px 0px;
			margin-left: 10px;
		}
		
		div.license {
			margin-left: 10px;
			padding-bottom: 30px;
		}
		
		div.license span {
			color: #A4A4A4;
		}
		
		div.license div.copyRightYear {
			margin: 10px 0;
			color: #686868;
		}
		
		img.cateye {
			margin-left: 20px;
		}
		
		div.categoryPageDiv {
			max-width: 1013px;
			margin: 10px auto;
		}
		
		div.categorySortBar {
			background-color: #FAF9F9;
			margin: 40px 20px 20px 20px;
			padding: 4px;
		}
		
		table.categorySortBarTable {
			border-collapse: collapse;
			display: inline-block;
		}
		
		table.categorySortBarTable span.glyphicon {
			font-size: 10px;
		}
		
		table.categorySortBarTable td {
			height: 17px;
			font-size: 12px;
			border: 1px solid #CCCCCC;
			padding: 3px;
		}
		
		table.categorySortBarTable td.grayColumn {
			background-color: #F1EDEC;
		}
		
		table.categorySortBarTable td a {
			color: #806F66;
			text-decoration: none;
		}
		
		table.categorySortBarTable td:hover {
			background-color: #F1EDEC;
		}
		
		table.categorySortBarTable td a:hover {
			color: #C40000;
			text-decoration: none;
		}
		
		table.categorySortBarTable input {
			border: none;
			height: 15px;
			width: 50px;
			outline: none;
			padding-left: 5px;
		}
		
		table.categorySortBarTable td.priceMiddleColumn {
			width: 5px;
			vertical-align: middle;
			color: #CCCCCC;
		}
		
		body {
			font-size: 12px;
			font-family: Arial;
		}
		
		body {
			font-size: 12px;
			font-family: Arial;
		}
		
		div.categoryPageDiv {
			max-width: 1013px;
			margin: 10px auto;
		}
		
		div.categoryProducts {
			padding: 0px 20px 40px 20px;
		}
		
		div.productUnit {
			width: 225px;
			height: 338px;
			border: 3px solid #ffffff;
			background-color: white;
			margin: 12px 5px;
			float: left;
		}
		
		div.productUnit:hover {
			border: 3px solid #C40000;
		}
		
		div.productUnitFrame {
			border: 1px solid #eeeeee;
			height: 100%;
		}
		
		div.productUnitFrame:hover {
			border: 1px solid #C40000;
		}
		
		div.productUnitFrame img.productImage {
			width: 100%;
			height: 190px;
		}
		
		div.productUnit span.productPrice {
			font-size: 20px;
			color: #CC0000;
			display: block;
			padding-left: 4px;
		}
		
		div.productUnit a.productLink {
			margin: 10px 0;
			color: #333333;
			display: block;
			height: 34px;
		}
		
		div.productUnit a.productLink:hover {
			color: #C40000;
			text-decoration: underline;
		}
		
		div.productUnit a.tmallLink {
			margin: 10px 0;
			color: #999999;
			display: block;
			text-decoration: underline;
		}
		
		div.productUnit a.tmallLink:hover {
			color: #C40000;
			text-decoration: underline;
		}
		
		div.productUnit div.productInfo {
			border-top: 1px solid #eeeeee;
			color: #999999;
		}
		
		div.productUnit span.productDealNumber {
			font-weight: bold;
			color: #B57C5B;
		}
		
		div.productUnit span.productReview {
			border-left: 1px solid #eeeeee;
			border-right: 1px solid #eeeeee;
		}
		
		div.productUnit span.productReviewNumber {
			font-weight: bold;
			color: #3388BB;
		}
		
		div.productUnit span.monthDeal, div.productUnit span.productReview {
			display: inline-block;
			width: 90px;
			height: 29px;
			padding-top: 5px;
			padding-left: 5px;
		}
		
		div.productUnit span.wangwang {
			padding-left: 3px;
		}
		
		div.categoryPageDiv {
			max-width: 1013px;
			margin: 10px auto;
		}
		
		div.categorySortBar {
			background-color: #FAF9F9;
			margin: 40px 20px 20px 20px;
			padding: 4px;
		}
		
		table.categorySortBarTable {
			border-collapse: collapse;
			display: inline-block;
		}
		
		table.categorySortBarTable span.glyphicon {
			font-size: 10px;
		}
		
		table.categorySortBarTable td {
			height: 17px;
			font-size: 12px;
			border: 1px solid #CCCCCC;
			padding: 3px;
		}
		
		table.categorySortBarTable td.grayColumn {
			background-color: #F1EDEC;
		}
		
		table.categorySortBarTable td a {
			color: #806F66;
			text-decoration: none;
		}
		
		table.categorySortBarTable td:hover {
			background-color: #F1EDEC;
		}
		
		table.categorySortBarTable td a:hover {
			color: #C40000;
			text-decoration: none;
		}
		
		table.categorySortBarTable input {
			border: none;
			height: 15px;
			width: 50px;
			outline: none;
			padding-left: 5px;
		}
		
		table.categorySortBarTable td.priceMiddleColumn {
			width: 5px;
			vertical-align: middle;
			color: #CCCCCC;
		}
		
		body {
			font-size: 12px;
			font-family: Arial;
		}
	</style>
	<script>
        $(function () {
            $("input.sortBarPrice").keyup(function () {
                var num = $(this).val();
                if (num.length == 0) {
                    $("div.productUnit").show();
                    return;
                }

                num = parseInt(num);
                if (isNaN(num))
                    num = 1;
                if (num <= 0)
                    num = 1;
                $(this).val(num);

                var begin = $("input.beginPrice").val();
                var end = $("input.endPrice").val();
                if (!isNaN(begin) && !isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        var price = $(this).attr("price");
                        price = new Number(price);
                        if (price <= end && price >= begin)
                            $(this).show();
                    });
                }

            });
        });
	</script>
</head>
<body>
	<nav class="top">
		<a href="#nowhere">
			<span class="glyphicon glyphicon-home redColor"></span>
			天猫首页
		</a>
		
		<span>喵，欢迎来到天猫</span>
		<a href="#nowhere">请登录</a>
		<a href="#nowhere">免费注册</a>
		
		<span class="pull-right">
			<a href="#nowhere">我的订单</a>
			<a href="#nowhere">
				<span class="glyphicon glyphicon-shopping-cart redColor"></span>
				购物车<storage>0</storage>件
			</a>
		</span>
	</nav>
	
	<div>
		<a href="#nowhere"><img alt="logo" class="logo" id="logo" src="https://how2j.cn/tmall/img/site/logo.gif"></a>
		<div class="searchDiv">
			<input name="keyword" placeholder="时尚男鞋  太阳镜" type="text">
			<button type="submit">搜索</button>
			<div class="searchBelow">
				<span><a href="#nowhere">平衡车</a><span>|</span></span>
				<span><a href="#nowhere">扫地机器人</a><span>|</span></span>
				<span><a href="#nowhere">原汁机</a><span>|</span></span>
				<span><a href="#nowhere">冰箱</a></span>
			</div>
		</div>
	</div>
	
	<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">
		<div class="categorySortBar">
			<table class="categorySortBarTable categorySortTable">
				<tbody>
					<tr>
						<td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a>
						</td>
						<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
					</tr>
				</tbody>
			</table>
			<table class="categorySortBarTable">
				<tbody>
					<tr>
						<td><input class="sortBarPrice beginPrice" placeholder="请输入" type="text"></td>
						<td class="grayColumn priceMiddleColumn">-</td>
						<td><input class="sortBarPrice endPrice" placeholder="请输入" type="text"></td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="categoryProducts">
			<div class="productUnit" price="799.2">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/7058.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥799.20</span>
					<a class="productLink" href="#nowhere">
						MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">16笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">14</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="511.2">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/7047.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥511.20</span>
					<a class="productLink" href="#nowhere">
						宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">49笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">18</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="448.2">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/7036.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥448.20</span>
					<a class="productLink" href="#nowhere">
						唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">34笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">16</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="411.6">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/7025.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥411.60</span>
					<a class="productLink" href="#nowhere">
						英伦邦纹男士手包牛皮大容量真皮手拿包手抓包双拉链商务正品软皮
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">25笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">19</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="157.25">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/7014.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥157.25</span>
					<a class="productLink" href="#nowhere">
						劳迪莱斯男士手包休闲手拿包牛皮大容量钱包男包软面小包包手抓包
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">17笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">16</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="268.2">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/7003.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥268.20</span>
					<a class="productLink" href="#nowhere">
						帕朗尼男士手拿包真皮手包商务休闲头层牛皮软牛皮大容量休闲钱包
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">5笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">19</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="233.4">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/6992.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥233.40</span>
					<a class="productLink" href="#nowhere">
						编织手包手拿包男信封大容量手抓包真皮韩版潮商务休闲牛皮男包
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">8笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">19</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div class="productUnit" price="952.0">
				<div class="productUnitFrame">
					<a href="#nowhere">
						<img class="productImage" src="https://how2j.cn/tmall/img/productSingle_middle/6981.jpg"
						     width="100px">
					</a>
					<span class="productPrice">¥952.00</span>
					<a class="productLink" href="#nowhere">
						犟牛男士手包真皮手拿包头层牛皮商务大容量手抓包软皮夹包信封包
					</a>
					<a class="tmallLink" href="#nowhere">天猫专卖</a>
					<div class="show1 productInfo">
						<span class="monthDeal ">月成交 <span class="productDealNumber">20笔</span></span>
						<span class="productReview">评价<span class="productReviewNumber">16</span></span>
						<span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="https://how2j.cn/tmall/img/site/wangwang.png">
					</a>
					</span>
					</div>
				</div>
			</div>
			<div style="clear:both"></div>
		</div>
	</div>
	
	<div class="footer" id="footer" style="display: block;">
		<div class="footer_ensure" id="footer_ensure">
			<a href="#nowhere">
				<img src="https://how2j.cn/tmall/img/site/ensure.png">
			</a>
		</div>
		<div class="footer_desc" id="footer_desc">
			<div class="descColumn">
				<span class="descColumnTitle">购物指南</span>
				<a href="#nowhere">免费注册</a>
				<a href="#nowhere">开通支付宝</a>
				<a href="#nowhere">支付宝充值</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">天猫保障</span>
				<a href="#nowhere">发票保障</a>
				<a href="#nowhere">售后规则</a>
				<a href="#nowhere">缺货赔付</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">支付方式</span>
				<a href="#nowhere">快捷支付</a>
				<a href="#nowhere">信用卡</a>
				<a href="#nowhere">蚂蚁花呗</a>
				<a href="#nowhere">货到付款</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">商家服务</span>
				<a href="#nowhere">商家入驻</a>
				<a href="#nowhere">商家中心</a>
				<a href="#nowhere">天猫智库</a>
				<a href="#nowhere">天猫规则</a>
				<a href="#nowhere">物流服务</a>
				<a href="#nowhere">喵言喵语</a>
				<a href="#nowhere">运营服务</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">手机天猫</span>
				<a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a>
			</div>
		</div>
		<div style="clear:both"></div>
		
		<img class="cateye" id="cateye" src="https://how2j.cn/tmall/img/site/cateye.png">
		<div class="copyright" id="copyright">
			<div class="white_link">
				<a href="#nowhere">关于天猫</a>
				<a href="#nowhere"> 帮助中心</a>
				<a href="#nowhere">开放平台</a>
				<a href="#nowhere"> 诚聘英才</a>
				<a href="#nowhere">联系我们</a>
				<a href="#nowhere">网站合作</a>
				<a href="#nowhere">法律声明</a>
				<a href="#nowhere">知识产权</a>
				<a href="#nowhere"> 廉正举报 </a>
			</div>
			<div class="white_link">
				<a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span>
				<a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
				<a href="#nowhere">天猫 </a><span class="slash">|</span>
				<a href="#nowhere"> 聚划算</a><span class="slash">|</span>
				<a href="#nowhere">全球速卖通</a><span class="slash">|</span>
				<a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
				<a href="#nowhere">1688</a><span class="slash">|</span>
				<a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
				<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
				<a href="#nowhere"> 阿里云计算 </a><span class="slash">|</span>
				<a href="#nowhere"> 阿里通信 </a><span class="slash">|</span>
				<a href="#nowhere"> YunOS </a><span class="slash">|</span>
				<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
				<a href="#nowhere"> 万网 </a><span class="slash">|</span>
				<a href="#nowhere"> 高德 </a><span class="slash">|</span>
				<a href="#nowhere"> 优视 </a><span class="slash">|</span>
				<a href="#nowhere"> 友盟 </a><span class="slash">|</span>
				<a href="#nowhere"> 虾米 </a><span class="slash">|</span>
				<a href="#nowhere"> 天天动听 </a><span class="slash">|</span>
				<a href="#nowhere"> 来往 </a><span class="slash">|</span>
				<a href="#nowhere"> 钉钉 </a><span class="slash">|</span>
				<a href="#nowhere"> 支付宝 </a>
			</div>
			<div class="license">
				<span>增值电信业务经营许可证： 浙B2-20110446</span>
				<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
				<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
				<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
				<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
				<div>
					<img src="https://how2j.cn/tmall/img/site/copyRight1.jpg">
					<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
				</div>
			</div>
		</div>
	</div>
</body>
</html>